<template>
  <div class="ses-1">
    <van-search
      v-model="obj.searchValue"
      show-action
      placeholder="请输入搜索关键词"
      @search="onSearch"
    >
      <template #action>
        <div @click="onClickButton">取消</div>
      </template>
    </van-search>
  </div>
  <div class="ses-2">
    <div v-if="tools.length > 0">
      <van-cell
        :title="item.appName"
        is-link
        :url="item.appUrl"
        v-for="(item, index) in tools"
        :key="index"
      >
        <template #icon><img :src="item.iconUrl" class="imgs-1" /></template>
      </van-cell>
    </div>
    <div class="icon-1" v-else>
      <div class="cans-1">常用应用</div>
      <div class="icoc-1">
        <div
          class="home-1-co4"
          v-for="(item, index) in arr"
          :key="index"
          @click="zjadds(item)"
        >
          <img :src="item.iconUrl" class="imgs-1" />
          <div class="home-1-co5">{{ item.appName }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { getRecent } from '@/utils/Commonmethod'
import { searchApp } from '@/services/user'
const router = useRouter()
const onSearch = () => {
  gettools()
}
const onClickButton = () => {
  router.go(-1)
}
const obj: any = ref({
  pageNum: 1,
  pageSize: 99,
  searchValue: ''
})
const arr: any = ref([])
const tools: any = ref([])
const gettools = async () => {
  const res = await searchApp(obj.value)
  tools.value = res.data
}
const zjadds = (item: any) => {
  window.location.href = item.appUrl
}
onMounted(async () => {
  arr.value = await getRecent({ pageNum: 1, pageSize: 99 })
})
</script>

<style lang="scss" scoped>
.ses-1 {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  border-bottom: 1px solid #e9e8e8;
}
.ses-2 {
  width: 100%;
  padding-top: 60px;
}
.van-cell {
  align-items: center;
}
.icon-1 {
  width: 100%;
}
.icoc-1 {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  width: 100%;
}
.cans-1 {
  font-size: 14px;
  font-weight: 400;
  padding-left: 10px;
  margin: 10px 0;
}
.home-1-co4 {
  width: 80px;
  display: flex;
  margin: 10px 5px;
  flex-direction: column;
  align-items: center;
}
.home-1-co5 {
  width: 100%;
  text-align: center;
  font-weight: 400;
  font-size: 12px;
  color: #333333;
}
.imgs-1 {
  width: 40px;
  height: 40px;
}
</style>
